import { defineComponent ,ref ,reactive} from "vue";
import styles from "./safetyHorse.module.less";
import { imgPath } from "@/common/utils";
export default defineComponent({
  setup() {
    const stateNavs = ref([
      {
        text:'全部',
      },
      {
        text:'未开始',
      },
      {
        text:'进行中',
      },
      {
        text:'已完成',
      },
    ]);
    const stateNavsActived = ref(0);
    const clickState = (index:number) =>{
      stateNavsActived.value = index
    } 
    //状态
    const StateNavs = () =>(
      <div class={styles.stateNavs}>
        <span>状态：</span>
        {
          stateNavs.value.map((item:any,index:number) =>(
            <div class={styles['stateNavs-item']} onClick={ ()=>{ clickState(index)  }}>
              <span class={[index === stateNavsActived.value && styles['actived']]}>{item.text}</span>
            </div>
          ))
        }
      </div>
    )
    const state = reactive({
      list:[],
    })

    return () => (
      <div class={styles.safetyHorse}>
        <div class={styles['header-box']}>企业安全档案</div>
        <div class={styles['safetyArchive-content']}>
          <StateNavs />
          <div class={styles['safetyArchive-list']}>
            {
              state.list.length === 0 ? 
              <div class={styles['no-message']}>
                <img src={imgPath('/userCenter/no-message.jpg')} />
              </div> :
              <div>

              </div>
            }
          </div>
        </div>
      </div>
    )
  }
})